<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>网站首页</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="../css/reset.css" rel="stylesheet">
<link href="../css/layout.css" rel="stylesheet">
<link href="../css/animate.min.css" rel="stylesheet">
<script src="../js/jquery-2.1.4.min.js"></script>
<script src="../js/xSlider.js"></script>
<script src="../js/index.js"></script>
<script>
	window.onload = function() {
		var oUl = document.getElementById('menuList');
		var aLi = oUl.children;
		var oBox = aLi[aLi.length - 1];
		var iNow = 0;

		for(var i = 0; i < aLi.length - 1; i++) {
			aLi[i].index = i;
			aLi[i].onmouseover = function() {
				//oBox.style.left=this.offsetLeft+'px';
				startMove(oBox, this.offsetLeft);
				style = "active";
			};
			aLi[i].onmouseout = function() {
				//oBox.style.left=this.offsetLeft+'px';
				startMove(oBox, iNow * aLi[0].offsetWidth);
			};
			aLi[i].onclick = function() {
				iNow = this.index;
			};
		}
	};
</script>
<style type="text/css">
	/*头部样式给你调整的，兼容下小屏幕做的处理*/
	
	.header {
		width: auto;
	}
	
	.commwidth {
		margin: 0;
		position: relative;
	}
	
	.menu {
		margin: 0 255px 0 268px;
	}
	
	#menuList {
		margin: 0 auto;
	}
	
	.logo {
		left: 74px;
		position: absolute;
		top: 0;
	}
	
	.user_menu {
		right: 100px;
		position: absolute;
		top: 0;
	}
	/*info-main*/
	
	
	/*footer*/
	
	.footer {
		margin-top: 34px;
		background: #282828;
		padding: 26px 0 30px;
	}
	
	.footer-top {
		width: 700px;
		margin: 0 auto;
	}
	
	.footer-title {
		color: #fff;
		font-size: 20px;
		margin-bottom: 14px;
	}
	
	.footer-vx-item {
		float: left;
	}
	
	.footer-vx-itemNo1 {
		margin-right: 50px;
	}
	
	.footer-vx-item p {
		font-size: 19px;
		color: #bfc3c9;
		text-align: center;
	}
	
	.footer-vx-item img {
		display: block;
		margin: 0 auto 10px;
	}
	
	.footer-vx {
		padding-right: 78px;
		border-right: 1px solid #6a6a6a;
	}
	
	.footer-contact {
		padding-left: 88px;
	}
	
	.footer-contact-font {
		font-size: 19px;
		color: #bfc3c9;
		margin-bottom: 22px;
	}
	
	.footer-bottom {
		font-size: 17px;
		color: #8e939a;
		text-align: center;
		margin-top: 26px;
	}
</style>
<style type="text/css">
	.info-video-bg {
		background: #191919;
		padding-top: 60px;
		padding-bottom: 50px;
	}
	.info-main {
		margin-top: -22px;
	}
	.info-video {
		width: 1200px;
		margin: 0 auto;
	}
	.info-top span,.info-top a{
		font-size: 20px;
		color: #999;
	}
	.info-top .info-top-title  {
		color: #fff;
	}
	.info-video-title {
		font-size: 33px;
		color: #fff;
		margin: 32px 0 40px;
	}
	.info-text {
		width: 1200px;
		margin: 35 auto 0;
	}
	.info-introduce {
		width: 800px;
		background: #f4f4f4;
		padding: 20px;
	}
	.info-introduce-title {
		margin-bottom: 40px;
	}
	.info-introduce-title span{
		font-size: 30px;
		color: #191919;
		border-bottom: 4px solid #17be74;
		line-height: 37px;
		padding: 0 12px;
		display: inline-block;
	}
	.info-introduce-text {
		padding: 0 18px;
		font-size: 23px;
		color: #4f4d4d;
	}
	.info-recommend {
		width: 260px;
		background: #f4f4f4;
		padding: 20px 30px 38px;
	}
	.info-recommend-title {
		font-size: 30px;
		color: #191919;
		margin-bottom: 26px;
	}
	.info-recommend-box img{
		width: 100%;
		display: block;
	}
	.info-recommend-text {
		background: #fff;
		padding: 18px 15px;
	}
	.info-recommend-font {
		font-size: 23px;
		color: #191919;
	}
	.info-recommend-status {
		margin-top: 10px;
		color: #4F4D4D;
	}
</style>
</head>

<body>
	<div class="header">
		<div class="commwidth clearfix">
			<h1 class="logo">
   					<img src="../images/logo.png" alt="">
   				</h1>
			<div class="menu">
				<ul class="clearfix" id="menuList">
					<li class="">
						<a href="#">首页</a>
					</li>
					<li>
						<a href="javascript:;">校本微课</a>
					</li>
					<li>
						<a href="javascript:;">名师微课</a>
					</li>
					<li>
						<a href="javascript:;">微课大赛</a>
					</li>
					<li>
						<a href="weike.html">课堂平台</a>
					</li>
					<li class="navBar">
						<a href="javascript:;">
							<p class="navtips clearfix">
								<span></span>
								<span></span>
								<span></span>
							</p>
							<div class="navList animated swing">
								<p>
									<a href="javascript:;">微课秀</a>
								</p>
								<p>
									<a href="javascript:;">微课直播</a>
								</p>
							</div>
						</a>
					</li>
					<li class="box"></li>
				</ul>
			</div>
			<div class="user_menu">
				<ul class="clearfix">
					<li>
						<span class="fl" id="sign">登录</span>
						<i class="fenge fl"></i>
						<em class="fl" id="register">注册</em>
					</li>
					<li class="searchLi">
						<div data-selector="search_show" class="search_show fl">
							<i data-selector="search_btn" class="icon1 search_btn fl"></i>
							<div data-selector="search_contain" class="search_contain opacity fl"><input type="text" class="search_text" data-selector="search_text"><i class="icon1"></i></div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="info-main">
		<div class="info-video-bg">
			<div class="info-video">
				<div class="info-top">
					<span>当前位置：</span>
					<a href="#">首页</a> >
					<a href="#">名师微课</a> > <span class="info-top-title">跟着前前老师学语文写作技巧</span>
				</div>
				<p class="info-video-title">跟着前前老师学语文写作技巧</p>
				<div style="height: 700px;color: #fff;border: 1px solid #fff;">
					这是视频
				</div>
			</div>
		</div>
		<div class="info-text clearfix">
			<div class="info-introduce fl">
				<p class="info-introduce-title"><span>课程简介</span></p>
				<p class="info-introduce-text">
					高中语文作文十大技巧
【技巧一】：作文成绩看字迹，得分要素是第一
任何形式的作文考试，阅卷老师打分时，第一眼，看的是字迹。因此，写作文必须要把字写好。记住，考作文考的是内容，而不是书法，切忌字迹潦草。
【技巧二】：考试作文五六段，干净整洁看卷面
考试作文中，要注意及时分段，三四个段落显得少了，八九个段落，显得琐碎了些。除非有特殊情况，段落以五六个段落为好。此外，卷面一定要整洁，不要涂改得乱七八糟。我的看法是，考试作文每段最好别超过5行，顶多是5行半。切忌一段都八九行，写成“大肚子作文”。一旦给阅卷老师视觉上的疲劳，影响他的心理，分数就受影响。如果有必要，死拉硬拽也要注意分段。
				</p>
			</div>
			<div class="info-recommend fr">
				<p class="info-recommend-title">推荐课程</p>
				<div class="info-recommend-box">
					<img src="../apply/a1.jpg"/>
					<div class="info-recommend-text">
						<p class="info-recommend-font">跟着花花老师学语文作文【写作技巧】</p>
						<div class="info-recommend-status clearfix">
							<span class="fl">9999人已学</span>
							<span class="fr">电教馆</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="footer">
		<div class="footer-top clearfix">
			<div class="footer-vx fl">
				<p class="footer-title">关注我们</p>
				<div class="footer-vx-box clearfix">
					<div class="footer-vx-item footer-vx-itemNo1">
						<img src="../images/vx1.jpg" />
						<p>佳讯教育</p>
					</div>
					<div class="footer-vx-item">
						<img src="../images/vx2.jpg" />
						<p>微课课堂服务号</p>
					</div>
				</div>
			</div>
			<div class="footer-contact fl">
				<p class="footer-title">关注我们</p>
				<p class="footer-contact-font">热线电话：400-815-0802</p>
				<p class="footer-contact-font">电&#12288;&#12288;话：010-62698511</p>
				<p class="footer-contact-font">Q &#12288;&#12288; Q：981940781</p>
			</div>
		</div>
		<p class="footer-bottom">© Copyright@2015-2025北京永恒信业科技有很公司 .版权所有 京ICP备09025686号-1</p>
	</div>
</body>
<script type="text/javascript">
	$('[data-selector="search_show"]').click(function() {
		$('[data-selector="search_contain"]').show();
		$('[data-selector="search_btn"]').hide();
	});
	$('[data-selector="search_text"]').focus(function() {
		$('[data-selector="search_contain"]').removeClass('opacity');
	});
	$('.slider').xSlider();
	$('.navBar').on('mouseover', function(event) {
		$('.navList').show();
		event.preventDefault();
	});
	$('.navBar').on('mouseout', function(event) {
		$('.navList').hide();
		event.preventDefault();
	});
	//登录
	$("#sign").on("click", function(e) {
		$("#sign_pop").show();
		$(document).one("click", function() {
			$("#sign_pop").hide();
		});
		e.stopPropagation();
	});
	$("#sign_pop").on("click", function(e) {
		e.stopPropagation();
		$('.mask').click(function(event) {
			$("#sign_pop").hide();
		});
	});
	//找回密码
	$('.forget_password').on('click', function(e) {
		$("#sign_pop").hide();
		$('#find_pas_pop').show();
		$(document).one("click", function() {
			$("#find_pas_pop").hide();
		});
		e.stopPropagation();
	});
	$("#find_pas_pop").on("click", function(e) {
		e.stopPropagation();
		$('.mask').click(function(event) {
			$("#find_pas_pop").hide();
		});
	});
	//返回登录
	$(".backBar").on("click", function(e) {
		$('#find_pas_pop').hide();
		$("#sign_pop").show();
		$(document).one("click", function() {
			$("#sign_pop").hide();
		});
		e.stopPropagation();
	});
	$("#sign_pop").on("click", function(e) {
		e.stopPropagation();
		$('.mask').click(function(event) {
			$("#sign_pop").hide();
		});
	});
	//找回密码下一步
	$('.nextBar').on('click', function(e) {
		$("#find_pas_pop").hide();
		$('#find_sure_pop').show();
		$(document).one("click", function() {
			$("#find_sure_pop").hide();
		});
		e.stopPropagation();
	});
	$("#find_sure_pop").on("click", function(e) {
		e.stopPropagation();
		$('.mask').click(function(event) {
			$("#find_sure_pop").hide();
		});
	});
	//注册
	$('.register_bar').on('click', function(e) {
		$("#sign_pop").hide();
		$('#register_pop').show();
		$(document).one("click", function() {
			$("#register_pop").hide();
		});
		e.stopPropagation();
	});
	$("#register_pop").on("click", function(e) {
		e.stopPropagation();
		$('.mask').click(function(event) {
			$("#register_pop").hide();
		});
	});

	//注册
	//     $("#register").on("click", function(e){
	//     $("#register_pop").show();

	//     $(document).one("click", function(){
	//<p class = "footer-contact-font" > 热线电话： 400 - 815 - 0802 < /p>
	//         $("#register_pop").hide();
	//     });

	//     e.stopPropagation();
	// });
	// $("#register_pop").on("click", function(e){
	//     e.stopPropagation();
	//     $('.mask').click(function(event) {
	//     	$("#register_pop").hide();
	//     });
	// });
</script>

</html>